<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <div class="topTitle">基本信息</div>
            <div class="basin-info">
              <div class="basin-left">
                <div class="box">
                  <span>类型：</span>
                  <span>{{ formValue.provideVo.userName }}</span>
                </div>
                <div class="box">
                  <span>名称：</span>
                  <span>{{ formValue.provideVo.idType }}</span>
                </div>
                <div class="box">
                  <span>征集方式：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>接收人：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>移交人联系方式：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>督交人：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>定价：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>版次：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>是否套装书：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
              </div>
              <div class="basin-left">
                <div class="box">
                  <span>接收时间：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>数量：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>交送单位：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>移交人：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>出版时间：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>作者：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>印次：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
                <div class="box">
                  <span>征集备注：</span>
                  <span>{{ formValue.provideVo.collectName }}</span>
                </div>
              </div>
            </div>
            <div class="topTitle">其他信息</div>
            <div class="basin-infoB">
              <div class="basin-left">
                <div class="box">
                  <span>附件：</span>
                  <VAttachments :attach-list="formValue.provideVo.fileList"></VAttachments>
                </div>
              </div>
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px; color: #5fb17f"
        ghost
        @click="goBack"
      >
        <template #icon>
          <NImage
            :src="VBackImg"
            style="width: 50rem; height: 50rem"
            preview-disabled
          ></NImage>
        </template>
        返回
      </NButton>
    </NSpace>
  </FixedAction>
</template>
<script setup lang="ts">
import { NScrollbar, NSpin, NButton, NImage } from 'naive-ui'
import type { HttpResponse } from '@/utils/http'
import { useRoute } from 'vue-router'
import router from '@/router'
import { ref, watch, reactive } from 'vue'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import { keysOf } from '@/utils/object'
import VAttachments from '@/views/OA/Common/Attachments.vue'
import VBackImg from '@/assets/images/back.png'

const props = defineProps({
  id: String
})
const formValue = reactive({
  examineVo: {
    feedbackContent: '',
    feedbackNotes: '',
    id: '',
    statusCode: '',
    statusName: ''
  },
  provideVo: {
    collectMethodName: '',
    collectName: '',
    collectNotes: '',
    commitTime: null,
    dept: '',
    feedbackNotes: '',
    fileIds: '',
    fileList: [],
    idNo: '',
    idType: '',
    phone: '',
    statusName: '',
    userName: ''
  }
})
const route = useRoute()
const tags = useTagStore().tags
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  
    tags.splice(index, 1)
if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}

//回显
const spinShow = ref(false)
const idT = ref()
const getInfo = async () => {
  idT.value = route.query.id
  spinShow.value = true
  await sendRequest<HttpResponse>({
    module: 'collectNotice',
    api: 'infoProvide',
    override: {
      params: {
        id: idT.value
      }
    }
  }).then(([err, res]) => {
    if (err) return
    keysOf(res.data.examineVo).forEach((e) => {
      {
        // @ts-ignore
        formValue.examineVo[e] = res.data.examineVo[e] as never
      }
    })
    keysOf(res.data.provideVo).forEach((e) => {
      {
        // @ts-ignore
        formValue.provideVo[e] = res.data.provideVo[e] as never
      }
    })
  })
  spinShow.value = false
}

watch(
  () => route,
  () => {
    if (route.name == 'informationSolicitationDetail') getInfo()
  },
  { deep: true, immediate: true }
)
</script>
<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;

      .basin-info {
        display: flex;
        width: 100%;
        height: auto;
        border-bottom: 1px dashed #bc9e70;
        margin-bottom: 10rem;

        .basin-left {
          flex: 0 0 40%;
        }
        .box {
          display: flex;
          margin-bottom: 20rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            width: 140rem;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
          }
        }

        .box:last-child {
          margin-bottom: 20rem;
        }
      }
      .basin-infoB {
        display: flex;
        width: 100%;
        height: auto;
        margin-bottom: 10rem;

        .basin-left {
          flex: 0 0 40%;
        }
        .box {
          display: flex;
          margin-bottom: 20rem;
          font-size: 16rem;

          span:first-child {
            display: inline-block;
            width: 120rem;
          }

          span:last-child {
            display: inline-block;
            flex: 1;
          }
        }

        .box:last-child {
          margin-bottom: 20rem;
        }
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
